<script setup lang="ts">
import Search from "./Search/index.vue";
import ClusterSwitch from "./ClusterSwitch/index.vue";
import Tool from "./Tool/index.vue";
import LayerManager from "./LayerManager/index.vue";
import Legend from "./Legend/index.vue";
import { useLocalStore } from "@/views/layer/gismap/store";
const isShowLegend = ref(false);
const isShowLayerManager = ref(false);
const store = useLocalStore();
const alarmData = ref([]);
const props = defineProps({
  deviceCategoryList: Array<any>,
  receiveAlarmData: Array<any>,
});
const toggleShowLegend = () => {
  isShowLegend.value = !isShowLegend.value;
};
const toggleShowLayerManager = () => {
  isShowLayerManager.value = !isShowLayerManager.value;
};

watchEffect(() => {
  alarmData.value = props.receiveAlarmData;
});
onUnmounted(() => store.resetVisibleLayerState());
</script>

<template>
  <Search :store="store" :receiveAlarmData="alarmData" />
  <ClusterSwitch @toggle-show-layer-manager="toggleShowLayerManager" />
  <Tool @toggle-show-legend="toggleShowLegend" />
  <!-- <LayerManager
    v-if="isShowLayerManager"
    @toggle-show-layer-manager="toggleShowLayerManager"
  />
  <Legend
    v-if="isShowLegend"
    @toggle-show-legend="toggleShowLegend"
    :deviceCategoryList="deviceCategoryList"
  /> -->
</template>

<style scoped lang="scss"></style>
